<template>
  <el-container style="height: 100vh; background-image: linear-gradient(135deg, #1352f2, #3c82f5); overflow: hidden;">
    <!-- 头部区域 - 包含Logo、分割线和系统名称 -->
    <el-header style="padding: 20px 50px; height: auto; background: transparent;">
      <div class="header-container">
        <img src="/img/logo.png" class="header-logo" alt="达内教育">
        <img src="/img/verticalLine.png" class="header-divider" alt="分割线">
        <span class="header-title">LBS智慧营销管理系统</span>
      </div>
    </el-header>

    <!-- 主内容区域 -->
    <el-main style="padding: 0; display: flex; align-items: center; justify-content: center;">
      <!-- 登录卡片 -->
      <div class="login-card">
        <!-- 左侧图片区域 -->
        <div class="login-image">
          <img src="/img/login.png" alt="LBS系统" class="lbs-image">
        </div>

        <!-- 右侧表单区域 -->
        <div class="login-form-container">
          <el-form :model="user" label-position="top" size="default" class="login-form">
            <!-- 视角选择 -->
            <el-form-item>
              <el-select
                  v-model="viewType"
                  placeholder="请选择视角"
                  class="form-select"
              >
                <el-option label="商家视角" value="merchant"></el-option>
                <el-option label="平台视角" value="platform"></el-option>
              </el-select>
            </el-form-item>

            <!-- 手机号输入 -->
            <el-form-item>
              <el-input
                  v-model="user.phone"
                  placeholder="请输入手机号"
                  :prefix-icon="Phone"
                  class="form-input"
              ></el-input>
            </el-form-item>

            <!-- 密码输入 -->
            <el-form-item>
              <el-input
                  v-model="user.password"
                  placeholder="请输入密码"
                  show-password
                  :prefix-icon="Lock"
                  class="form-input"
              ></el-input>
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item>
              <el-row :gutter="10" class="captcha-row">
                <el-col :span="14">
                  <el-input
                      v-model="user.captcha"
                      placeholder="请输入验证码"
                      :prefix-icon="Key"
                      class="form-input"
                  ></el-input>
                </el-col>
                <el-col :span="10">
                  <div class="captcha-code" @click="generateCaptcha">
                    {{ captchaCode }}
                  </div>
                </el-col>
              </el-row>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
              <el-button
                  type="primary"
                  class="login-button"
                  @click="handleLogin"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
import { Phone, Lock, Key } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import axios from "axios";
import router from '../router';

// 读取全局注入的 BASE_URL
const { proxy } = getCurrentInstance();
const BASE_URL = proxy.BASE_URL; // 从全局属性中获取网关地址

// 登录数据
const user = ref({
  phone: '19941253145',
  password: '',
  captcha: ''
});

// 视角选择
const viewType = ref('merchant');

// 验证码
const captchaCode = ref('WD90');

// 生成验证码
const generateCaptcha = () => {
  axios.get("http://localhost:19999/v1/captcha/generate")
      .then(response => {
        if (response.data.code === "0") {
          console.log('验证码生成成功：', response.data.data);
          captchaCode.value = response.data.data;
        } else {
          ElMessage.error('验证码生成失败：' + response.data.message);
        }
      }).catch(error => {
        console.error('获取验证码失败', error);
        ElMessage.error('网络错误，无法获取验证码');
      });
};

// 登录处理
const handleLogin = () => {
  // 表单验证
  if (!user.value.phone) {
    ElMessage.error('请输入手机号');
    return;
  }
  if (!user.value.password) {
    ElMessage.error('请输入密码');
    return;
  }
  if (!user.value.captcha) {
    ElMessage.error('请输入验证码');
    return;
  }
  if (user.value.captcha.toUpperCase() !== captchaCode.value) {
    ElMessage.error('验证码不正确');
    generateCaptcha();
    return;
  }

  // 发送登录请求
  axios.post(BASE_URL + '/passport/user/login', {
    ...user.value,
    viewType: viewType.value
  })
      .then(response => {
        if (response.data.code === "0") {
          ElMessage.success('登录成功');
          localStorage.setItem('user', JSON.stringify(response.data.data));
          localStorage.setItem('viewType', viewType.value);
          router.push('/');
        } else {
          ElMessage.error(response.data.message);
          user.value.password = '';
          user.value.captcha = '';
          generateCaptcha();
        }
      })
      .catch(error => {
        console.error('登录失败', error);
        ElMessage.error('网络异常，请稍后重试');
      });
};

// 页面加载时生成验证码
onMounted(() => {
  generateCaptcha();
});
</script>

<style scoped>
/* 顶部栏样式 */
.header-container {
  display: flex;
  align-items: center;
  gap: 12px; /* 元素之间的间距 */
}

.header-logo {
  height: 50px; /* Logo高度 */
}

.header-divider {
  height: 35px; /* 分割线高度 */
  opacity: 0.8; /* 分割线透明度 */
}

.header-title {
  font-size: 28px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 登录卡片样式 */
.login-card {
  display: flex;
  width: 820px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 30px;
}

/* 左侧图片区域 */
.login-image {
  flex: 1;
  background-color: #f5f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.lbs-image {
  width: 100%;
  max-width: 240px;
  object-fit: contain;
}

/* 右侧表单区域 */
.login-form-container {
  flex: 1.2;
  padding: 50px 40px;
}

.login-form {
  width: 100%;
}

/* 表单元素样式 */
.form-select {
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.form-input {
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.captcha-row {
  width: 100%;
}

.captcha-code {
  height: 44px;
  background-color: #f0f5ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  letter-spacing: 6px;
  color: #1352f2;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
  border: 1px solid #e1e6eb;
}

.captcha-code:hover {
  background-color: #e6edf7;
}

.login-button {
  width: 100%;
  height: 46px;
  font-size: 16px;
  background-color: #1352f2;
  border-color: #1352f2;
  border-radius: 4px;
}

.login-button:hover {
  background-color: #0e46d2;
  border-color: #0e46d2;
}

/* 调整表单项间距 */
:deep(.el-form-item) {
  margin-bottom: 22px !important;
}

/* 输入框聚焦样式 */
:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 选择框样式 */
:deep(.el-select .el-input__inner) {
  height: 44px;
  line-height: 44px;
}

:deep(.el-select-dropdown__item.selected) {
  color: #1352f2;
}
</style>